<template>
    <!-- 属性组 -->
    <div class="view_attribute_group">
        <card :title="cardTitle">
            <template v-slot:actions>
                <el-input
                    class="w-48"
                    v-model="queryString"
                    placeholder="按组名查找"
                    prefix-icon="el-icon-search"
                    clearable
                />
                <el-button type="primary" @click="addAttributeGroup">添加属性组</el-button>
                <el-button type="primary" plain @click="openUnlinkingAttributeDialog">解除属性关联</el-button>
            </template>
            <template v-slot:default>
                <el-table :data="tableData" @selection-change="handleTableSelect">
                    <el-table-column type="selection"></el-table-column>
                    <el-table-column label="组名" prop="attrGroupName"></el-table-column>
                    <el-table-column label="描述" prop="groupDescript"></el-table-column>
                    <el-table-column label="图标" prop="icon"></el-table-column>
                    <el-table-column label="排序" prop="groupSort"></el-table-column>
                    <el-table-column label="操作">
                        <template v-slot="{ row }">
                            <el-button type="text" @click="editAttributeGroup(row)">编辑</el-button>
                            <el-button type="text" @click="openLinkingAttributeDialog(row)">关联</el-button>
                            <el-button type="text" @click="deleteAttributeGroups(row.attrGroupId)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
            <template v-slot:bottom-left>
                <el-button type="danger" @click="deleteAttributeGroups" :disabled="isDeletingButtonDisabled">
                    批量删除
                </el-button>
            </template>
            <template v-slot:bottom-right>
                <el-pagination
                    @current-change="query"
                    :currentPage.sync="currentPage"
                    :total="total"
                    :pageSize="pageSize"
                />
            </template>
        </card>

        <!-- 添加/编辑属性组对话框 -->
        <el-dialog :visible.sync="visible" @closed="handleDialogClosed" :title="dialogTitle">
            <template v-slot:default>
                <el-form label-position="top">
                    <el-row :gutter="12">
                        <el-col :span="8">
                            <el-form-item label="组名">
                                <el-input v-model="formData.attrGroupName"></el-input>
                            </el-form-item>
                        </el-col>

                        <el-col :span="8">
                            <!-- <el-form-item label="当前分类">
                                <el-input disabled v-model="$categoryName"></el-input>
                            </el-form-item> -->
                            <el-form-item label="图标">
                                <el-input v-model="formData.icon"></el-input>
                            </el-form-item>
                        </el-col>

                        <el-col :span="8">
                            <el-form-item label="排序">
                                <el-input v-model="formData.groupSort" type="number" min="0" max="99"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-form-item label="描述">
                        <el-input v-model="formData.groupDescript" type="textarea" :rows="3" resize="none"></el-input>
                    </el-form-item>
                </el-form>
            </template>
            <template v-slot:footer>
                <el-button type="primary" @click="saveAttributeGroup">保存</el-button>
            </template>
        </el-dialog>

        <!-- 解除关联属性对话框 -->
        <el-dialog :visible.sync="visible2" custom-class="linking_attribute_dialog">
            <linked-attribute :category-id="$categoryId" />
        </el-dialog>

        <!-- 添加关联属性对话框 -->
        <el-dialog :visible.sync="visible3" custom-class="linking_attribute_dialog">
            <unlinked-attribute :category-id="$categoryId" :attribute-group-id="attributeGroupIdInLinking" />
        </el-dialog>
    </div>
</template>

<script>
import { getQueryOptions } from '../../mixins';
import linkedAttribute from '../components/attribute_groups_attribute_linked';
import unlinkedAttribute from '../components/attribute_groups_attribute_unlinked';

const defaultFormData = {
    attrGroupName: '',
    groupSort: 99,
    icon: '',
    groupDescript: '',
};

const defaultFormDataCopied = Object.assign({}, defaultFormData);

export default {
    data() {
        return {
            tableData: [],

            editing: false,

            visible: false,
            visible2: false,
            visible3: false,

            formData: defaultFormData,

            selectedId: [],

            // 在关联中的属性组主键
            attributeGroupIdInLinking: 0,
        };
    },

    mixins: [
        getQueryOptions({
            apiurl: '/yxl/pms/findAttrGroup',
            paginable: true,
            params: {
                queryString: 'groupName',
                $categoryId: 'catalogId',
            },
        }),
    ],

    components: { linkedAttribute, unlinkedAttribute },

    computed: {
        // 卡片视图标题
        cardTitle() {
            return `${this.$categoryName}属性组`;
        },

        // 对话框标题
        dialogTitle() {
            return this.editing ? '编辑属性组' : '添加属性组';
        },

        // 批量删除按钮是否禁用
        isDeletingButtonDisabled() {
            return !this.selectedId.length;
        },

        $categoryId() {
            return +this.$route.query.categoryId;
        },

        $categoryName() {
            return this.$route.query.categoryName;
        },
    },

    watch: { $categoryId: 'query' },

    methods: {
        // 添加属性组
        addAttributeGroup() {
            this.editing = false;
            this.visible = true;
        },

        // 编辑属性组
        editAttributeGroup(row) {
            Object.assign(this.formData, row);
            this.editing = true;
            this.visible = true;
        },

        // 保存属性组
        saveAttributeGroup() {
            let data = Object.assign({ catalogId: this.$categoryId }, this.formData);

            this.$put(`/yxl/pms/${this.editing ? 'update' : 'save'}AttrGroup`, data).then(res => {
                this.visible = false;
                this.query();
            });
        },

        // 批量删除属性组
        deleteAttributeGroups(id) {
            this.$confirm('是否确定删除数据', '删除提示', {
                showClose: false,
                closeOnClickModal: false,
                type: 'error',
            })
                .then(() => {
                    this.$$delete('/yxl/pms/deleteAttrGroup', {
                        attrGroupId: typeof id === 'number' ? id : this.selectedId.toString(),
                    }).then(this.query);
                })
                .catch(function () {});
        },

        // 打开关联属性对话框
        openLinkingAttributeDialog({ attrGroupId }) {
            this.visible3 = true;
            this.attributeGroupIdInLinking = attrGroupId;
        },

        // 打开解除关联属性组对话框
        openUnlinkingAttributeDialog() {
            this.visible2 = true;
        },

        // 处理对话框关闭
        handleDialogClosed() {
            delete this.formData.attrGroupId;
            delete this.formData.catalogId;
            Object.assign(this.formData, defaultFormDataCopied);
        },

        // 处理表格选择
        handleTableSelect(selectedRows) {
            this.selectedId = selectedRows.map(row => row.attrGroupId);
        },
    },
};
</script>